<template>
  <div>
    <div style="font-size: 25px; font-weight: bold; text-align: center;">分布式政务数据中心安全共享平台</div>
  </div>
  <div>&nbsp;&nbsp;&nbsp;</div>

  <!-- 显示签名结果 -->
  <div v-if="showSignature">
    <div style="display: flex;">
      <div>签名结果：</div>
      <div>
        <el-input  v-model="signatureResult" type="textarea" placeholder="签名结果" rows="8" cols="50"></el-input>
      </div>
    </div>
    <div>&nbsp;&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;</div>
    <div style="display: flex;">
      <div>私钥：</div>
      <div>
        <el-input v-model="input_text" :prefix-icon="User" type="text" placeholder="私钥" style="margin-bottom: -10px"></el-input>
      </div>
      <div>&nbsp;&nbsp;&nbsp;</div>

      <div style="display: flex; justify-content: center; align-items: center;">
        <button id="upload" class="btn btn-default" type="button" style="position: relative;">
          <img src="floder.svg" alt="">
          <input type="file" name="file" id="upload_document" @change="showFile($event)" style="opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;" />
        </button>
      </div>

    </div>
    <div style="margin-top: 20px; display: flex; justify-content: center; align-items: center;">
      <el-button @click="verify" style="width: 80%" type="success" plain>验证</el-button>
    </div>

  </div>

  <!-- 隐藏其他内容 -->
  <div v-else>
    <div class="hello" style="margin-top: 50px; display: flex; text-align: center; margin: 0 20px; width: 30vw; height: 10vw;">
      <div style="display: flex; justify-content: center; align-items: center; width: 400px;">
        <el-input v-model="input_text" :prefix-icon="User" type="text" placeholder="公钥" style="margin-bottom: -10px"></el-input>
      </div>
      <div>&nbsp;&nbsp;&nbsp;</div>
      <div style="display: flex; justify-content: center; align-items: center;">
        <button id="upload" class="btn btn-default" type="button" style="position: relative;">
          <img src="floder.svg" alt="">
          <input type="file" name="file" id="upload_document" @change="showFile($event)" style="opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;" />
        </button>
      </div>
    </div>

    <div style="margin-top: 20px; display: flex; justify-content: center; align-items: center;">
      <el-button @click="greendirectToLogin" style="width: 80%" type="success" plain>提交</el-button>
    </div>

    <el-divider>
      <span style="color: grey; font-size: 13px">没有账号</span>
    </el-divider>

    <div style="display: flex; justify-content: center; align-items: center;">
      <el-button style="width: 80%;" @click="redirectToRegister" type="warning" plain>注册账号</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { User } from '@element-plus/icons-vue';
import { ref } from 'vue';
import router from "@/router";
import { ElMessage } from "element-plus";

const input_text = ref('');


const signatureResult = ref(''); // 用于存储签名结果
const randomData = ref('');
const showSignature = ref(false); // 控制签名结果的显示状态，默认隐藏
const yesornot = ref('');

const showFile = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      input_text.value = e.target.result;
    };
    reader.readAsText(file);
  }
};

const verify = () => {
  const privateKey = input_text.value;
  console.log(privateKey);
  console.log(randomData.value);

  if (!privateKey) {
    ElMessage.error('请输入私钥');
    return;
  }

  const requestData = {
    PrivateKey : privateKey,
    RandomData: randomData.value,
  };
  console.log(requestData);

  axios.post('http://127.0.0.1:8080/api/auth/verify', requestData)
      .then(response => {
        yesornot.value = response.data;
        if (yesornot.value = "1") {

          ElMessage.success('验证成功');
          router.push('/frontlogin');
        }else {

          ElMessage.error('验证失败');

        }
      }).catch(error => {
    console.error('发送失败', error);
    ElMessage.error('发送失败');
  });
};

const redirectToRegister = () => {
  router.push('/register');
};

const greendirectToLogin = () => {
  const publicKey = input_text.value;

  if (!publicKey) {
    ElMessage.error('请输入公钥');
    return;
  }

  const requestData = {
    publicKey: publicKey
  };

  axios.post('http://127.0.0.1:8089/api/auth/login', requestData)
      .then(response => {
        console.log('发送成功', response.data);
        // 将后端返回的签名存储在 signatureResult 中
        signatureResult.value = response.data[0];
        randomData.value = response.data[1];
        // 显示签名结果，隐藏其他内容
        showSignature.value = true;
      })
      .catch(error => {
        console.error('发送失败111', error);
        ElMessage.error('发送失败');
      });
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

#upload {
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: all 0.6s;
}

#upload:hover {
  transform: scale(1.9);
}
</style>
